<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="title">登陆</div>
      </div>
      <el-form
        :model="ruleForm"
        status-icon
        ref="ruleFormREF"
        label-width="100px"
        :rules="rules"
        class="demo-ruleForm"
      >
        <el-form-item prop="pass">
          <el-input
            type="text"
            v-model="ruleForm.username"
            prefix-icon="el-icon-user"
            autocomplete="off"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.password"
            prefix-icon="el-icon-lock"
            autocomplete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="login"
            >登陆</el-button
          >
          <el-button type="info" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="circle"></div>
    </el-card>
  </div>
</template>

<script>
// import request from '../utils/request'
import Md5 from 'js-md5'
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      ruleForm: {
        username: 'admin',
        password: '123456'
      },
      loading: false,
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在6到16个字符', trigger: 'blur' }
        ]
      }
    }
  },

  methods: {
    ...mapActions({
      LOGIN_IN: 'login/LOGIN_IN'
    }),
    login () {
      // 在vuex中发起请求，并将登录表单数据传递给 action
      this.$refs.ruleFormREF.validate(async (bool) => {
        // 登录验证
        if (!bool) return
        const userInfo = { ...this.ruleForm }
        try {
          // 发起请求捕捉返回信息
          await this.LOGIN_IN(userInfo) // 在vuex中发起请求，并携带表格信息
          this.loading = false // 登录成功之后登录按钮放开
          this.$router.replace('/userlist')
          this.$message.success('登录成功')
        } catch (error) {
          this.loading = false // 登录失败，登录按钮放开，方便再次登录
          console.log(error)
          // console.log('登录失败:', error) // 添加日志以查看登录失败原因
        }
      })
    },
    getMd5 (str) { // md5加密加盐
      const salt = '676gyigigh'
      return Md5(Md5(str) + salt)
    },

    reset () {
      this.ruleForm = ''
    }
  }
}
</script>

<style scope>
body {
  background: url("../assets/2.jpg");
  background-size: 100% 100%;
  /* overflow: hidden; */
}
.is-always-shadow {
  margin: auto;
  margin-top: 200px;
  position: relative;
  overflow: none !important;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 400px;
  height: 300px;
  box-shadow: 1px 2px 30px 20px rgb(255, 255, 255) !important;
}
.title {
  margin-top: 20px;
  color: white;
}
.el-input {
  width: 310px;
}
.el-form-item__content {
  margin-left: 0px !important;
}
.el-button {
  width: 110px;
}

.re {
  margin-left: 85px;
  margin-top: 10px;
}
.circle {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: url("../assets/logo.png");
  background-size: 100% 100%;
  position: absolute;
  top: -62px;
  left: 126px;
  z-index: 999;
  box-shadow: 0px 0px 10px 15px white !important;
}
</style>
